<template>
    <div id="container">
		<!-- 图片类别滚动区域 -->
		<div id="slider" class="mui-slider">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a :class="['mui-control-item', i==0 ?' mui-active':'']"  v-for="(item,i) in photoTypeList" :key="i">
						{{item.name}}
					</a>						
				</div>
			</div>
		</div>

		<!-- 图片列表区域 -->
		<ul type='none' class="photolist">
			<li v-for="img in list" :key="img">
				<img v-lazy.container="img" >
			</li>
		</ul>
    </div>
</template>

<script>
import mui from '../../css/mui/js/mui.min.js'
import axios from "axios"
import { Toast } from 'mint-ui'
export default {
	data(){
		return {
			photoTypeList:[],	// 图片类别
			list:[]	//图片列表
		}
	},
	created(){

		this.getPhotoType()
		this.getPhotoByType(4000)
	},
    mounted(){
        mui('.mui-scroll-wrapper').scroll({
            scrollY: false, //是否竖向滚动
            scrollX:true , //是否横向滚动
            startX: 0, //初始化时滚动至x
            startY: 0, //初始化时滚动至y
            indicators: false, //是否显示滚动条
            deceleration:0.0005, //阻尼系数,系数越小滑动越灵敏
            bounce: true //是否启用回弹
            });
	},
	methods:{
		getPhotoType(){
			axios.get("http://route.showapi.com/852-1", {
				params: {
				showapi_appid: "69119",
				showapi_sign: "2f25c88c51774595b0b8ea8b17852294"
				}
			})
				.then(res=>{
					if(res.data.showapi_res_body.ret_code ===0 ){
						this.photoTypeList= res.data.showapi_res_body.list[3].list
						this.photoTypeList.unshift({name:"全部"})
					}else{
						Toast('图片类别列表获取失败')
					}
				})			
		},
		getPhotoByType(id){
			axios.get("http://route.showapi.com/852-2", {
				params: {
				showapi_appid: "69119",
				showapi_sign: "2f25c88c51774595b0b8ea8b17852294",
				type:id
				}
			})
				.then(res=>{
					if(res.data.showapi_res_code ===0 ){						
						 res.data.showapi_res_body.pagebean.contentlist.forEach(item => {
							 this.list.push(item.list[0].big)
						})
					}else{
						Toast('图片列表获取失败')
						console.log(res.data.showapi_res_error);
						
					}
				})				
		},
	}
}
</script>

<style lang="scss" scoped>
* {
		touch-action: pan-y;
	}
	.photolist{
		    padding: 10px;
			padding-bottom: 0;
			li{
				box-shadow: 0 0 9px #ccc;
				background-color: #ccc;
				text-align: center;
				margin-bottom: 10px;
				border-radius: 5px ;
				img[lazy='loading']{
					width: 40px;
					height: 300px;
					margin: auto;
				}
				img{
					width: 100%;
					height: 100%;
				border-radius: 5px ;
					vertical-align: middle;
				}
			}
	}
</style>
